<script setup lang="ts">
import { graphic } from 'echarts/core'
import { computed, onMounted, shallowRef } from 'vue'

import useEcharts from '~/composables/chart'

import BlockHead from './block-head.vue'
import defaults from './default-chart-option'

import type { SeniorityInfo } from '../type'

defineOptions({
  name: 'ItemServen',
})

const props = defineProps<{
  data: SeniorityInfo
}>()

const { chartRef, setOption } = useEcharts()

const data = shallowRef<{ name: string, value: string }[]>([])
const option = computed(() => {
  return {
    legend: {
      show: false,
    },
    tooltip: {
      ...defaults.tooltip,
      axisPointer: {
        type: 'cross',
      },
      formatter(params: any) {
        // 获取渐变颜色的起始颜色
        let color = params[0].color
        try {
          color = color.colorStops[1]?.color
        }
        catch (e) {}
        const colorDot = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`
        return `${colorDot}${params[0].name}: ${params[0].value}`
      },
    },
    grid: {
      ...defaults.grid,
      top: 20,
      bottom: 30,
      right: 40,
    },
    xAxis: {
      type: 'value',
      name: '单位：人',
      nameTextStyle: {
        align: 'right',
        verticalAlign: 'top',
        lineHeight: 24,
      },
      axisLine: { show: false },
      axisLabel: { show: false },
      axisTick: { show: false },
      position: 'bottom',
      max(value: any) {
        return value.max * 1.3
      },
    },
    yAxis: [{
      type: 'category',
      data: data.value.map(v => v.name),
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      position: 'left',
    }, {
      type: 'category',
      data: data.value.map(v => v.name),
      axisTick: {
        show: false,
      },
      axisLabel: { show: false },
      splitLine: {
        show: false,
      },
      position: 'left',
    }, {
      type: 'category',
      data: data.value.map(v => v.name),
      axisTick: {
        show: false,
      },
      axisLabel: { show: false },
      splitLine: {
        show: false,
      },
      position: 'left',
    }],
    series: [
      {
        type: 'bar',
        showBackground: true,
        barWidth: 12,
        data: data.value.map(v => v.value),
        itemStyle: {
          opacity: 0,
        },
        yAxisIndex: 0,
        tooltip: { show: false },
      },
      {
        yAxisIndex: 1,
        type: 'bar',
        data: data.value.map(v => v.value),
        barWidth: 6,
        showBackground: false,
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: 'rgba(46,137,250,0)' },
            { offset: 1, color: 'rgba(23,230,255,0.99)' },
          ]),
        },
        label: {
          show: true,
          color: '#17E6FF',
          fontSize: 12,
          lineHeight: 12,
          fontWeight: 600,
          distance: 10,
          position: 'right',
        },
      },
      {
        type: 'bar',
        data: data.value.map(v => v.value),
        showBackground: false,
        barWidth: 12,
        itemStyle: {
          opacity: 0,
        },
        stack: 'a',
        yAxisIndex: 2,
        tooltip: { show: false },
      },
      {
        type: 'bar',
        showBackground: false,
        barWidth: 12,
        data: data.value.map(() => 0),
        barMinHeight: 4,
        itemStyle: {
          borderRadius: 4,
          opacity: 1,
          color: 'rgba(255,255,255,1)',
        },
        stack: 'a',
        yAxisIndex: 2,
        tooltip: { show: false },
      },
    ],
  }
})

onMounted(() => {
  data.value = Object.keys(props.data).map((v) => {
    return {
      name: v,
      value: props.data[v],
    }
  })
  setOption(option.value)
})
</script>

<template>
  <div class="flex flex-col">
    <BlockHead title="工龄分布" />
    <div class="block-body h-70 w-full flex flex-auto">
      <div ref="chartRef" style="width:100%;height:100%;" />
    </div>
  </div>
</template>
